<template>
  <div>
    <!-- el-container外层容器   el-header顶栏容器（最上层）   el-main主要区域容器（被用来放轮播图）-->
    <el-container>
      <!-- 顶部卡片 -->
      <el-header style="height: 75px">
        <div class="range">
          <img
            src="../image/cute2.gif"
            alt=""
            style="width: 10%; margin-left: 15px"
          />
          <div
            style="
              font-size: 66px;
              font-family: 楷体;
              margin-left: 200px;
              margin-top: 2px;
            "
          >
            ⑥点资讯报
          </div>
          <div>
            <img src="../image/cute.gif" alt="" style="width: 15%" />
            <el-dropdown
              style="margin-right: -300px; padding: 10px 0"
              v-if="userName"
            >
              <span class="el-dropdown-link">
                {{ userName }} <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="loginOut"
                  >注销</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>

            <el-dropdown
              style="margin-right: -300px; padding: 10px 0"
              v-else
              @click.native="goLogin"
            >
              <span class="el-dropdown-link"> 点击登录 </span>
            </el-dropdown>
          </div>
        </div>
      </el-header>
    </el-container>



  </div>
</template>

<script>
export default {
  name: "Top",
  mounted() {
    this.userName = localStorage.getItem("username");
  },
  data() {
    return {
      userName: "",

    };
  },
  methods: {
    loginOut() {
      localStorage.removeItem("username");
      localStorage.removeItem("token");
      localStorage.removeItem("id");
      localStorage.removeItem("isAdmin")
      this.$router.push("/login");
    },
    goLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
/* 顶部网站背景样式 */
.range {
  background-color: rgb(255, 255, 255);
  width: 1400px;
  height: 75px;
  margin-left: 40px;
  margin-top: -7px;
  text-align: center;
  border-radius: 1000px;
  box-shadow: 4px 5px 15px #164e97c2;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/* 顶部网站标题样式 */
/* 顶部样式 */
.el-header {
  background-color: #abe3fd;
  color: #333;
  text-align: center;
  width: 1519px;

  margin-left: 0px;
  margin-top: 0px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>